<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Projector</title>
    <script src="perspective.js"></script>
</head>
<body>
<style>
    body {
        text-align: center;
        margin: 0;
        padding: 0;
    }

    .row {
        position: relative;
        margin: 20px auto;
        width: 1024px;
    }

    .parent {
        position: relative;
        top: 0;
        left: 0;
        width: 1024px;
    }

    #progress {
        border-bottom: 1px solid black;
        visibility: hidden;
    }

    #progress_inner {
        background-color: black;
        -webkit-transition: width 1s;
        color: white;
        font-family: Apercu;
        font-size: 14px;
        width: 60px;
        text-align: left;
        padding: 3px 20px 5px;
    }

    input {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 2px solid #dedede;
        width: 800px;
        text-align: center;
        font-family: Apercu;
        font-size: 18px;
    }

    .input {
        margin: 60px 0 20px;
    }

    .submit {
        font-family: Apercu;
        font-size: 16px;
        padding: 5px 20px 8px;
        color: white;
        background-color: black;
        border: none;
        border-radius: 3px;
        margin-bottom: 60px;
    }

    img, canvas {
        top: 0;
        left: 0;
        position: absolute;
    }

    .base_image {
        position: relative;
    }

    .template {
        width: 1024px;
        height: auto;
    }

    .reflection {
        top: 17.97%;
        left: 28.2%;
        width: 27.2%;
        height: auto;
        position: absolute;
    }

    #row3 {
        margin-bottom: 100px;
    }
</style>

<script>
    let progress_timer = null;

    function startProgress() {
        const progress = document.getElementById('progress');
        const progress_inner = document.getElementById('progress_inner');

        progress.style.visibility = 'visible';
        let incr = 150;
        let width = 60;
        progress_timer = setInterval(function() {
            width += Math.floor(Math.random()*5 + incr);
            incr *= 0.9;
            progress_inner.style.width = `${width}px`;
        }, 300);
    }

    function stopProgress() {
        const progress = document.getElementById('progress');
        const progress_inner = document.getElementById('progress_inner');

        progress_inner.style.width = '100%';

        setTimeout(function() {
            progress.style.visibility = 'hidden';
            progress_inner.style.width = '60px';
            if (progress_timer != null) {
                clearTimeout(progress_timer);
                progress_timer = null;
            }
        }, 500);
    }
</script>

<script>
    const imagesAndCoord = [
        {canvasName: 'canvas', coords: [[650, 134], [794, 161], [656, 441], [514, 402]]},
        {canvasName: 'canvas_2', coords: [[777, 172], [871, 266], [518, 477], [461, 362]]},
        {canvasName: 'canvas_3', coords: [[304, 134], [549, 147], [550, 567], [312, 578]]}
    ];
    const PERSONAL_ACCESS_TOKEN = '<INSERT YOUR PERSONAL ACCESS TOKEN>';

    function getFileKey(pageUrl) {
        const parser = document.createElement('a');
        parser.href = pageUrl;
        return parser.pathname.replace('/file/', '').replace(/\/.*/,'');
    }

    function getNodeId(pageUrl) {
        const parser = document.createElement('a');
        parser.href = pageUrl;
        return decodeURIComponent(parser.search).replace('?node-id=','');
    }

    function apiRequest(endpoint) {
        return fetch('https://api.figma.com/v1' + endpoint, {
            method: 'GET',
            headers: { "x-figma-token": PERSONAL_ACCESS_TOKEN }
        }).then(function(response) {
            return response.json();
        }).catch(function (error) {
            return { err: error };
        });
    }

    function addImageToCanvas(imageUrl) {
        stopProgress();
        const img = new Image();

        img.src = imageUrl;

        img.onload = function () {
            imagesAndCoord.forEach(function (imageInfo) {
                const canvas = document.getElementById(imageInfo.canvasName);

                const context = canvas.getContext('2d')

                const op = new html5jp.perspective(context, img);
                op.draw(imageInfo.coords);
            });
        };
    }

    function callFigmaAndDrawMockups() {
        startProgress();

        const pageUrl = document.getElementById('url_input').value;

        const nodeId = getNodeId(pageUrl);

        apiRequest('/images/' + getFileKey(pageUrl) + '?ids=' + nodeId)
            .then(function (apiResponse) {
               addImageToCanvas(apiResponse.images[nodeId]);
            });
    }
</script>

<div id="progress">
    <div id="progress_inner">Rendering</div>
</div>

<form action="javascript:callFigmaAndDrawMockups()">
    <div class="input">
        <input id='url_input' placeholder="Enter Figma URL" type="text">
    </div>
    <button class="submit">Render</button>
</form>

<div class="row">
    <div class="parent">
        <img class="template base_image" src="images/_bottom.png" />
        <canvas id="canvas" width="1024" height="577"></canvas>
        <img class="template" src="images/_top.png" />
    </div>
</div>

<div class="row">
    <div class="parent">
        <img class="template base_image" src="images/phone-in-hand.jpeg" />
        <canvas id="canvas_2" width="1024" height="577"></canvas>
    </div>
</div>

<div id="row3" class="row">
    <div class="parent">
        <img class="template base_image" src="images/busstop.png" />
        <canvas id="canvas_3" width="1024" height="600"></canvas>
        <img class="reflection" src="images/reflection.png" />
    </div>
</div>
</body>
</html>
